Add quick navigation box for Agents

Andrew Cantino лет %!s(int64=10): %!d(string=назад)
Родитель
Сommit
6a82f27034

+ 26 - 3
app/assets/javascripts/application.js.coffee.erb

@@ -54,7 +54,30 @@ $(document).ready ->
54 54
   if $(".flash").length
55 55
     setTimeout((-> $(".flash").slideUp(-> $(".flash").remove())), 5000)
56 56
 
57
-  # Agent Show
57
+  # Agent Navigation
58
+  $agentNavigate = $('#agent-navigate')
59
+  $agentNavigate.typeahead(
60
+    minLength: 0,
61
+    items: 15,
62
+    source: agentNames
63
+  ).on("change", (e) ->
64
+    if agentPaths[$agentNavigate.val()]
65
+      $('#agent-navigate').closest(".navbar-search").find(".spinner").show();
66
+      window.location = agentPaths[$agentNavigate.val()]
67
+  ).on("focus", (e) ->
68
+    $agentNavigate.val ''
69
+  ).on("blur", (e) ->
70
+    $agentNavigate.val ''
71
+  )
72
+
73
+  # Pressing '/' selects the search box.
74
+  $("body").on "keypress", (e) ->
75
+    if e.keyCode == 47 # The '/' key
76
+      if e.target.nodeName == "BODY"
77
+        e.preventDefault()
78
+        $agentNavigate.focus()
79
+
80
+# Agent Show
58 81
   fetchLogs = (e) ->
59 82
     agentId = $(e.target).closest("[data-agent-id]").data("agent-id")
60 83
     e.preventDefault()
@@ -85,7 +108,7 @@ $(document).ready ->
85 108
 
86 109
   $("#agent_type").on "change", ->
87 110
     if window.jsonEditor?
88
-      $(".spinner").fadeIn();
111
+      $("#agent-spinner").fadeIn();
89 112
       $("#agent_source_ids").select2("val", {});
90 113
       $(".event-descriptions").html("").hide()
91 114
       $.getJSON "/agents/type_details", { type: $(@).val() }, (json) =>
@@ -104,7 +127,7 @@ $(document).ready ->
104 127
         window.jsonEditor.json = json.options
105 128
         window.jsonEditor.rebuild()
106 129
 
107
-        $(".spinner").stop(true, true).fadeOut();
130
+        $("#agent-spinner").stop(true, true).fadeOut();
108 131
 
109 132
   $("#agent_type").change() if $("#agent_type").length
110 133
 

+ 14 - 7
app/assets/stylesheets/application.css.scss.erb

@@ -51,10 +51,6 @@ table.events {
51 51
   margin-left: 0 !important;
52 52
 }
53 53
 
54
-#job-indicator, #event-indicator {
55
-  display: none;
56
-}
57
-
58 54
 img.odin {
59 55
   position: relative;
60 56
   top: -32px;
@@ -86,14 +82,25 @@ img.spinner {
86 82
   overflow: hidden;
87 83
 }
88 84
 
85
+// Navbar
86
+
87
+#job-indicator, #event-indicator {
88
+  display: none;
89
+}
90
+
91
+.navbar-search > .spinner {
92
+  position: absolute;
93
+  top: -1px;
94
+  right: 1px;
95
+}
96
+
89 97
 // Flash
90 98
 
91 99
 .flash {
92 100
   position: fixed;
93
-  width: 500px;
101
+  width: 210px;
94 102
   z-index: 99999;
95
-  top: 1px;
96
-  margin-left: 250px;
103
+  right: 20px;
97 104
 
98 105
   .alert {
99 106
   }

+ 1 - 1
app/views/agents/edit.html.erb

@@ -4,7 +4,7 @@
4 4
       <div class="page-header">
5 5
         <h2>
6 6
           Editing your <%= @agent.short_type %>
7
-          <%= image_tag "spinner-arrows.gif", :class => "spinner" %>
7
+          <%= image_tag "spinner-arrows.gif", :class => "spinner", :id => 'agent-spinner' %>
8 8
         </h2>
9 9
       </div>
10 10
 

+ 1 - 1
app/views/agents/new.html.erb

@@ -4,7 +4,7 @@
4 4
       <div class="page-header">
5 5
         <h2>
6 6
           Create a new Agent
7
-          <%= image_tag "spinner-arrows.gif", :class => "spinner" %>
7
+          <%= image_tag "spinner-arrows.gif", :class => "spinner", :id => 'agent-spinner' %>
8 8
         </h2>
9 9
       </div>
10 10
 

+ 8 - 0
app/views/layouts/_navigation.html.erb

@@ -9,11 +9,18 @@
9 9
 
10 10
 <ul class="nav pull-right">
11 11
   <% if user_signed_in? %>
12
+
13
+    <form class="navbar-search pull-left">
14
+      <input type="text" class="search-query" id='agent-navigate' autocomplete="off" placeholder="Search">
15
+      <%= image_tag "spinner-arrows.gif", :class => "spinner" %>
16
+    </form>
17
+
12 18
     <li id='job-indicator'>
13 19
       <a href="/delayed_job">
14 20
         <span class="badge"><i class="icon-refresh icon-white"></i> <span class='number'>0</span></span>
15 21
       </a>
16 22
     </li>
23
+
17 24
     <li id='event-indicator'>
18 25
       <a href="#">
19 26
         <span class="badge"><i class="icon-random icon-white"></i> <span class='number'>0</span> new events</span>
@@ -45,3 +52,4 @@
45 52
     </ul>
46 53
   </li>
47 54
 </ul>
55
+

+ 10 - 0
app/views/layouts/application.html.erb

@@ -32,5 +32,15 @@
32 32
         </div>
33 33
       </div>
34 34
     </div>
35
+
36
+    <script>
37
+      var agentPaths = <%= Utils.jsonify(current_user.agents.inject({}) {|m, a| m[a.name] = agent_path(a) unless a.new_record?; m }) %>;
38
+      agentPaths["All Agents Index"] = <%= Utils.jsonify agents_path %>;
39
+      agentPaths["New Agent"] = <%= Utils.jsonify new_agent_path %>;
40
+      agentPaths["Account"] = <%= Utils.jsonify edit_user_registration_path %>;
41
+      agentPaths["Events Index"] = <%= Utils.jsonify events_path %>;
42
+      var agentNames = [];
43
+      $.each(agentPaths, function(name, v) { agentNames.push(name); });
44
+    </script>
35 45
   </body>
36 46
 </html>

+ 4 - 0
lib/utils.rb

@@ -51,4 +51,8 @@ module Utils
51 51
       result
52 52
     end
53 53
   end
54
+
55
+  def self.jsonify(thing)
56
+    thing.to_json.gsub('</', '<\/').html_safe
57
+  end
54 58
 end